<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ page import="org.ifilm.model.User,org.ifilm.util.GeneralConstants"%>

<%
	//TEST TO CHECK WHETHER LOGGED USER IS IN OUR SESSION OR NOT
	User loggedUser = (User) session.getAttribute(GeneralConstants.user);

	if (loggedUser != null) {
		System.out.println(loggedUser.getEmail());
	} else {
		System.out.println("No user in session!");
	}
%>

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Home Page</title>
		
		<link href="/film/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"/>
		<script src="/film/bootstrap/js/jquery.js"></script>
	    <script src="/film/bootstrap/js/bootstrap.min.js"></script>
	    
	    <style>
	      	body {
	        	padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
	      	}
	    </style>
	</head>
	
	<body>
		<div class="navbar navbar-inverse navbar-fixed-top">
		  	<div class="navbar-inner">
		  		<div class="container">
			    	<a class="brand" href="#">iFilm</a>
			    	<ul class="nav">
			      		<li class="active"><a href="/film/homeDraft.jsp">Home Draft</a></li>
			      		<li><a href="/film/createProject.jsp">Create Project</a></li>
			      		<li><a href="/film/projectDetail.jsp">Project Detail</a></li>
			      		<li><a href="#">PAGE</a></li>
			      		<li><a href="#">PAGE</a></li>			      		
			    	</ul>
			    	
			    	<div class="navbar-text pull-right">
			    		<a href='/film/userProfile.jsp' class="navbar-link"><%=loggedUser.getName() + " " + loggedUser.getSurname()%>
			    		</a>
			    		<a href='#' id="logout" class="navbar-link">Logout</a>
			    	</div>
		    	</div>
		    </div>
		</div>
		 
		 <div class="container">
			 <div class="content-container">
			 	<c:forEach var="p" items="${projects}">
				 	<div class="media">
				 		<a class="pull-left" href="#">
				 			<img class="media-object" src="http://placehold.it/200x160">
				 		</a>
				 		<div class="media-body">
				 			<a href="#"><h3 class="media-heading projectTitle" pid="${p.id}">${p.projectName}</h3></a>
				 			Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
				 			Suspendisse vel massa nisl. Nulla facilisi. Curabitur mattis 
				 			congue tincidunt. Curabitur iaculis risus euismod est feugiat 
				 			interdum. Aliquam vel lacus vitae sapien vulputate pulvinar. 
				 			Cras eu ante quam, ac pulvinar lacus. Etiam consectetur, risus 
				 			at gravida fermentum, tellus massa placerat nunc, non pharetra 
				 			nisl ante a erat. Ut vitae massa ligula. Nulla facilisi. Vivamus 
				 			massa erat, tempor at porttitor vel, vehicula id magna.
				 		</div>
				 	</div>
				 	<hr size=3>
			 	</c:forEach>
			 	
			 	<div class="pagination pagination-centered">
			 		<ul>
			 			<c:if test="${page == null or page == 1}">
				 			<li><a page="1" href="#">Prev</a></li>
				 		</c:if>
				 		
				 		<c:if test="${page != null and page != 1}">
				 			<li><a page="${page - 1}" href="#">Prev</a></li>
				 		</c:if>
				 		
				 		<c:if test="${page == null or page == 1 or page == 2}">
				 			<li><a page="1" href="#">1</a></li>
							<li><a page="2" href="#">2</a></li>
							<li><a page="3" href="#">3</a></li>
							<li><a page="4" href="#">4</a></li>
							<li><a page="5" href="#">5</a></li>
				 		</c:if>
				 		
				 		<c:if test="${page != null and page != 1 and page != 2}">
				 			<li><a page="${page - 2}" href="#">${page - 2}</a></li>
							<li><a page="${page - 1}" href="#">${page - 1}</a></li>
							<li><a page="${page}" href="#">${page}</a></li>
							<li><a page="${page + 1}" href="#">${page + 1}</a></li>
							<li><a page="${page + 2}" href="#">${page + 2}</a></li>
				 		</c:if>
						
						<c:if test="${page == null}">
				 			<li><a page="2" href="#">Prev</a></li>
				 		</c:if>
				 		
				 		<c:if test="${page != null}">
				 			<li><a page="${page + 1}" href="#">Next</a></li>
				 		</c:if>
					</ul>
				</div>
			 </div>
	 	</div>
	</body>
	
	<script type="text/javascript">
	    $(".pagination a").click(function() {
	    	var page = $(this).attr("page");
	    	window.location.href = ("/film/project/listProjects.do?page=" + page + "&max=" + <%=request.getParameter("max")%>);
	    })
	    
	    $(".projectTitle").click(function() {
	    	var pid = $(this).attr("pid");
	    	window.location.href = "/film/project/getProject.do?pid=" + pid;
	    });
	    
		$("#logout").click(function() {
			$.ajax("/film/req/user/logout").done(function() {
				window.location.href = "/film";
			});
		});
	</script>
</html>